"use client"

import React from 'react'
import Image from 'next/image'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog'
import { DIALOG_CONTENT, FRIEND_LINKS } from '@/lib/constants/bottom-navigation'
import type { FriendLink } from '@/lib/types/bottom-navigation'

interface FriendLinksDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

/**
 * 友情链接弹窗组件
 */
export function FriendLinksDialog({ open, onOpenChange }: FriendLinksDialogProps) {
  // 处理链接点击
  const handleLinkClick = (link: FriendLink) => {
    window.open(link.link2, '_blank', 'noopener,noreferrer')
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-center">
            {DIALOG_CONTENT.friendLinks.title}
          </DialogTitle>
          <DialogDescription className="text-sm text-muted-foreground text-center">
            {DIALOG_CONTENT.friendLinks.description}
          </DialogDescription>
        </DialogHeader>
        
        <div className="mt-6">
          {/* 友情链接网格 */}
          <div className="grid grid-cols-2 gap-4">
            {FRIEND_LINKS.map((friendLink, index) => (
              <FriendLinkCard
                key={index}
                friendLink={friendLink}
                onClick={() => handleLinkClick(friendLink)}
              />
            ))}
          </div>

          {/* 底部说明 */}
          <div className="mt-6 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <div className="flex items-center gap-2">
              <span className="text-blue-600 dark:text-blue-400 text-lg">🔗</span>
              <div className="flex-1 text-xs text-blue-700 dark:text-blue-300">
                <p className="font-medium">友情链接说明：</p>
                <p className="mt-1">点击卡片可直接访问对应网站</p>
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

/**
 * 单个友情链接卡片组件
 */
interface FriendLinkCardProps {
  friendLink: FriendLink
  onClick: () => void
}

function FriendLinkCard({ friendLink, onClick }: FriendLinkCardProps) {
  return (
    <div
      className="group relative p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer transition-all duration-200 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600"
      onClick={onClick}
    >
      {/* 网站图标 */}
      <div className="flex justify-center mb-3">
        <div className="w-12 h-12 relative rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
          <Image
            src={friendLink.icon2}
            alt={`${friendLink.title2} logo`}
            width={48}
            height={48}
            className="w-full h-full object-contain"
          />
        </div>
      </div>

      {/* 网站标题 */}
      <h3 className="text-sm font-medium text-center text-gray-900 dark:text-gray-100 mb-1">
        {friendLink.title2}
      </h3>

      {/* 网站描述 */}
      {friendLink.desc2 && (
        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
          {friendLink.desc2}
        </p>
      )}

      {/* 悬停效果指示器 */}
      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
        <svg
          className="w-4 h-4 text-blue-500"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
          />
        </svg>
      </div>
    </div>
  )
} 